<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on基础</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="v-on指令" v-on:click="doIt"/>
			<input type="button" value="v-on简写" @click="doIt" />
			<input type="button" value=" 双击事件" @dblclick="doIt" />
			<h2 @click="changeFood">{{food}}</h2>
			
		</div>
		
		<script type="text/javascript">
			
			// v-on 指令的作用是为元素绑定事件
			// 事件名不需要写 on
			// 指令可以简写为 @
			// 绑定的方法在 methods 属性中
			// 方法内部通过 this 关键字可以访问定义在 data 中的数据
			
			new Vue({
				el:"#app",
				data: {
					food:"番茄炒鸡蛋"
				},
				methods:{
					doIt: function(){
						alert("doIt");
					},
					changeFood: function(){
						this.food += "好好吃";
					}
				}
			});
		</script>
	</body>
</html>
